<template>
	<view class="delete-btn" @click.stop="deleteImage(index)">
		<view class="delete-icon"></view>
	</view>
</template>

<script setup>
	const props = defineProps({
		index: {
			type: [String, Number],
			required: true, // 标记为必传
			default: undefined // 显示声明没有默认值
		}
	})
	const emit = defineEmits(['clearItem']);
	const deleteImage = (index) => {
		
		uni.showModal({
			title: '提示',
			content: '确定要删除这张图片吗？',
			success: (res) => {
				if (res.confirm) {
					emit('clearItem', index)
				}
			}
		});
	}
</script>

<style lang="less" scoped>
	.delete-btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 48rpx;
		height: 48rpx;
		background-color: rgba(0, 0, 0, 0.6);
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transform: translate(-30%, 0%);
		cursor: pointer;

		.delete-icon {
			position: relative;
			width: 28rpx;
			height: 4rpx;
			background-color: white;
			transform: rotate(45deg);

			&::after {
				content: '';
				position: absolute;
				width: 24rpx;
				height: 4rpx;
				background-color: white;
				transform: rotate(90deg);
			}
		}
	}
</style>